<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
	body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
	</style>
	<link rel="stylesheet" href="../../taofang/plugins/bootstrap-3.3.7-dist/css/bootstrap.min.css">
	<link rel="stylesheet" href="../../taofang/css/home.css">
<!--	<link href="http://cdn.bootcss.com/font-awesome/4.7.0/fonts/fontawesome-webfont.svg"/>-->
<!--	<link href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">-->
<!--	<link href="css/industry_map.css" rel="stylesheet">-->
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=zTAd0KdgeZxdb8P66ujClxjr01qZwzQR"></script>
	<title>地图展示</title>
</head>
<body>
<div class="container-fluid" style="margin-bottom: 0">
	<div class="row" style="margin-bottom: 0">
		<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
			<div class="container-fluid">
				<div class="navbar-header">
					<button type="button" class="navbar-toggle" data-toggle="collapse"
							data-target="#example-navbar-collapse">
						<span class="sr-only">切换导航</span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
					<img class="h" src="../../taofang/img/logo.png" alt="加载失败">
				</div>
				<div>
					<!--向左对齐-->
					<ul class="nav navbar-nav navbar-left">
						<li><a href="../home_page/home.jsp">首页</a></li>
						<li><a href="../rent/hezuyemian.jsp">合租</a></li>
						<li><a href="../rent/zhengzuyemian.jsp">整租</a></li>
						<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown">
								推荐版块
								<b class="caret"></b>
							</a>
							<ul class="dropdown-menu">
								<li><a href="../rent/student.jsp">学生版</a></li>
								<li><a href="../rent/white.jsp">白领版</a></li>
								<li><a href="#">其他</a></li>
							</ul>
						</li>
						<li><a href="../home_page/postHomeWhole.jsp">发布房源</a></li>
					</ul>
					<form class="navbar-form navbar-left" role="search">
						<div class="form-group">
							<input type="text" class="form-control" placeholder="搜索房源">
						</div>
						<button type="submit" class="btn btn-default">搜索</button>
					</form>

					<!--向右对齐-->
					<ul class="nav navbar-nav navbar-right">
						<li><a href="../login/login.jsp" data-toggle="modal" data-target="#myModal">登录/注册</a></li>
						<li class="dropdown">
							<a href="../personal_homepage/broker/agency.jsp" class="dropdown-toggle" data-toggle="dropdown">
								个人中心 <b class="caret"></b>
							</a>
							<ul class="dropdown-menu">
								<li><a href="../personal_homepage/landlord/agency.jsp">房东中心</a></li>
								<li><a href="../personal_homepage/tenant/agency.jsp">租客中心</a></li>
								<li><a href="../personal_homepage/broker/agency.jsp">经纪人中心</a></li>
							</ul>
						</li>
						<li>
							<img class="head" src="../../taofang/img/logo.png" alt="加载失败">
						</li>
					</ul>
				</div>
			</div>
		</nav>
	</div>
</div>




	<div id="allmap"></div>
</body>
</html>


<script src="../../taofang/plugins/jquery-3.4.1.js"></script>
<script src="../../taofang/plugins/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../../taofang/js/textIconOverlay1.js"></script>
<script type="text/javascript" src="../../taofang/js/maplib1.js"></script>
<script type="text/javascript">
	// 百度地图API功能
	var map = new BMap.Map("allmap");    // 创建Map实例
	map.centerAndZoom(new BMap.Point(120.686047,31.322781), 12);  // 初始化地图,设置中心点坐标和地图级别
	map.addControl(new BMap.MapTypeControl());   //添加地图类型控件
	map.addControl(new BMap.NavigationControl({enableGeolocation:true}));
	map.addControl(new BMap.OverviewMapControl());
	map.setCurrentCity("南京");          // 设置地图显示的城市 此项是必须设置的
	map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放

	//===================
	var xy = [
		{'x':120.671351,'y':31.32346},
		{'x':120.825824,'y':31.331758},
		{'x':120.555901,'y':31.274739},
		{'x':120.719117,'y':31.148236},
		{'x':120.602181,'y':31.358157},
		{'x':120.645013,'y':31.388988},
		{'x':120.555326,'y':31.454316},
		{'x':120.925284,'y':31.333456},
		{'x':120.586659,'y':31.311274},
		{'x':120.78213,'y':31.463187},
		{'x':120.825824,'y':31.169002},
		{'x':120.92126,'y':31.300414}
	];
	var markers = [];
	var pt = null;
	for (var i in xy) {
	   pt = new BMap.Point(xy[i].x , xy[i].y);
	   markers.push(new BMap.Marker(pt));
	}
	//最简单的用法，生成一个marker数组，然后调用markerClusterer类即可。
	var markerClusterer = new BMapLib.MarkerClusterer(map,
		{
			markers:markers,
			girdSize : 100,
			styles : [{
	            url:'../img/red.png',
	            size: new BMap.Size(92, 92),
				backgroundColor : '#E64B4E'
			}],
		});
	markerClusterer.setMaxZoom(13);
	markerClusterer.setGridSize(100);
//================================================
	var xy1 = [
		{'x':120.800527,'y':31.566622},
		{'x':120.810527,'y':31.447353},
		{'x':120.812527,'y':31.359839},
		{'x':120.812007,'y':31.500000},
		{'x':120.677882,'y':31.059839},
		{'x':120.787882,'y':31.079839},
		{'x':120.777982,'y':31.069839},
		{'x':120.765682,'y':31.465639},
		{'x':120.745612,'y':31.056139},
		{'x':120.749562,'y':31.126519}
		];
	var markers1 = [];
	var pt = null;
	for (var i in xy1) {
	   pt = new BMap.Point(xy1[i].x , xy1[i].y);
	   markers1.push(new BMap.Marker(pt));
	}
	//最简单的用法，生成一个marker数组，然后调用markerClusterer类即可。
	var markerClusterer1 = new BMapLib.MarkerClusterer(map,
		{
			markers:markers1,
			girdSize : 100,
			styles : [{
	            url:'../img/blue.png',
	            size: new BMap.Size(92, 92),
				backgroundColor : '#4783E7'
			}],
		});
	markerClusterer1.setMaxZoom(13);
	markerClusterer1.setGridSize(100);
	console.log(markerClusterer1);
	console.log(markerClusterer);
</script>
